import { Button } from "antd";
import { Component } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

const modules = {
  toolbar: [
    [{ header: [1, 2, false] }],
    ["bold", "italic", "underline", "strike", "blockquote"],
    [
      { list: "ordered" },
      { list: "bullet" },
      { indent: "-1" },
      { indent: "+1" },
    ],
    ["link", "image"],
    ["clean"],
  ],
};

const formats = ["header"];

export default class DemoQuill extends Component {
  state = {
    value: "",
  };

  onChange = (value: string) => {
    this.setState({ value });
  };

  getValue = () => {
    console.log(this.state.value);
  };

  render() {
    return (
      <div>
        <h2>富文本编辑器</h2>

        <Button type="primary" onClick={this.getValue}>
          获取Value内容
        </Button>
        <hr />

        <ReactQuill
          modules={modules}
          formats={formats}
          value={this.state.value}
          onChange={this.onChange}
        />
      </div>
    );
  }
}
